<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-12 23:36:57
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <view>
    <view class="h2">手机验证码登录</view>
    <u-form class="mt_lg" :model="formState" :rules="rules">
      <u-form-item prop="phoneOrEmail">
        <u-input
          :placeholder="$t('mobile.form.phone.placeholder')"
          v-model="formState.phoneOrEmail"
          prefixIcon="email-fill"
        ></u-input>
      </u-form-item>

      <u-form-item prop="type">
        <u-input
          :placeholder="$t('mobile.form.verification.placeholder')"
          v-model="formState.captcha"
          prefixIcon="lock-fill"
        >
          <template #suffix>
            <u-button
              @tap="handleGetCode"
              :text="codeHint"
              :disabled="countdown > 0 || !formState.phoneOrEmail"
               class="input-btn"
            ></u-button>
          </template>
        </u-input>
      </u-form-item>

   

      <u-form-item>
        <u-button
          type="primary"
          @click="handleLogin"
          :text="$t('mobile.form.submit')"
        ></u-button>
      </u-form-item>
    </u-form>
    <slot></slot>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useFormState } from './hooks';

export default defineComponent({
  name: 'Mobile',
  setup() {
    const {
      formState,
      rules,
      countdown,
      codeHint,
      handleGetCode,
      handleLogin,
    } = useFormState();

    return {
      formState,
      rules,
      countdown,
      codeHint,
      handleGetCode,
      handleLogin,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.popup-container {
  min-width: 400px;
  padding: map-get($spaces, lg);
  border-radius: map-get($radii, lg);
  background: url('./static/images/login-bg.png') center center/cover no-repeat;

  .image-box {
    padding: $space;
    border-radius: map-get($radii, lg);
    background: $white-color;
  }

  .hint {
    font-size: 12px;
  }

  .close-btn {
    position: absolute;
    top: map-get($spaces, sm);
    right: map-get($spaces, sm);
    width: 50px;
    border: none;
    background: none;
  }
}
</style>
